<template>
	<view class="">
		<view class="header" :style="{paddingTop:tabh}">
			<view class="flexJBC paddingLR32" style="padding-top:40rpx">
				<u-icon name="arrow-left" size="40rpx" color="#333" @click="$my.go()" ></u-icon>
				<view class="flex" style="">
					<image src="/static/images/index/net 1.png" mode="" style="width: 46rpx;height: 34rpx;"></image>
					<view class="fw7" style="font-size: 40rpx;">
						奈喜严选
					</view>
				</view>
				<!-- 别删 站位 -->
				<view class=""></view>
				<!-- <u-icon name="search" size="48rpx" color="#333"></u-icon> -->
			</view>
			<view class="center co6" style="margin-top: 20rpx;">
				严选好货·超值性价比
			</view>
			<view class="swiper"  style="margin-top: 20rpx;" v-if="swiperList.length>0">
				<u-swiper radius='0' height='420rpx' :list="swiperList" @change="swiperchange"   keyName='image'></u-swiper>
				<view class="swipertextInfo cof">
					<view class="acBox absolute">
						{{activeSwiper}}/{{swiperList.length}}
					</view>
				</view>
			</view>
		</view>
		<view class="lisBox"  style="margin-top: -50rpx;">
			<u-tabs :current='tabsActive' :list="tabs" @click="getList" :activeStyle="{color:$store.state.homeRed }" keyName='cate_name'
				:itemStyle="{color: '#999', fontSize:'32rpx',lineHeight:'80rpx',}" :lineColor="$store.state.homeRed">
			</u-tabs>
			<view class="padding32">  
				<List :showTopTitle='false'  type='2' :list="list" v-if="list.length>0" /> 
			</view>
		</view>
	</view>
</template>

<script>
	import List from '@/componentes/list.vue'
	export default {
		components:{
			List
		},
		methods:{
			swiperchange(e){
				this.activeSwiper=e.current+1
			},
			getTabs(){
				this.$my.post('/index/Product/getPlatFormTypeProductType',{platform_type_id:this.id}).then(res=>{
					if(res.code==200){
						this.tabs=res.data
						this.getList()
					}
				})
			},
			getLunbo() {
				// 轮播图
				this.$my.post('/index/com/getAd', {
					type: 0,
					type_id: this.id
				}).then(res => {
					if (res.code == 200) {
						this.swiperList = res.data
					}
				})
			},
			getList(val){
				console.log(this.tabsActive)
				if(val){
					this.page=1;
					this.list=[];
					this.tabsActive = val.index
				}
				this.$my.post('/index/Product/getPlatformTypeProductStrict',{page:this.page,limit:10,platform_type_id:this.id,category_id:this.tabs[this.tabsActive].store_category_id}).then(res=>{
					if(res.code==200 && res.data.data.length>0){
						this.list=this.list.concat(res.data.data)
					}
				})
			},
		},
		onReachBottom() {
			if(this.tabs.length>0){
				this.page++;
				this.getList()
			}
			
		},
		data() {
			return {
				 tabh:this.$store.state.tabh,
				page:1,
				id:'',//分类id
				tabsActive:0,  //tabs当前项
				activeSwiper:1,//当前播放第几张
				swiperList: [],
				tabs: [],
				list:[],
			}
		},
		onLoad(option) {
			this.id=option.id?option.id:0;
			this.getTabs();
			this.getLunbo()
		}
		
	}
</script>

<style lang="scss" scoped>
	page{
		// padding-top: 144rpx;
	}
	.lisBox{
		width: 100%;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0 0;
		position: relative;
		z-index: 10;
		background: linear-gradient(#fff 0.5%, #f5f5f5 100%);
	}
	.swiper { 
		height: 420rpx;
		position: relative;
		border: 50%;
		.swipertextInfo{
			.acBox{
				bottom:52rpx;
				right: 60rpx;
				background: rgba(255, 255, 255, 0.66);
				border-radius: 20rpx;
				width: 92rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				
			}
			.text1{
				bottom: 92rpx;
				left: 32rpx;
				font-size: 40rpx;
				z-index: 9;
			}
		}
	}

	.header {
		// height:200rpx;
		padding-bottom: 20rpx;
		// box-sizing: border-box;
		// position: fixed;
		// top: 0%;
		// left: 0%;
		// z-index: 99;
		width: 100%;
		background: linear-gradient(49.92deg, #BDDFFF 0%, rgba(192, 223, 236, 1) 60.08%, rgba(255, 255, 255, 1) 100%)
	}
</style>
